<template>
  <div class="main flex-center">
    <div class="warp">
      <h1 class="title font-16">需求线索</h1>

      <el-form ref="ruleFormRef" :model="form" :rules="rules" label-position="top">
        <div class="form">
          <div class="item">
            <div class="item-title font-14 flex flex-align-items-center">基础信息</div>
            <el-form-item label="需求线索名称" prop="name">
              <el-input v-model="form.name" type="text" placeholder="请输入" maxlength="32" />
            </el-form-item>
            <el-form-item label="推广类型" prop="type">
              <el-select v-model="form.type" placeholder="请选择" style="width: 100%">
                <el-option v-for="item in typeList" :key="item.value" :label="item.name" :value="item.name"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="上线日期">
              <el-date-picker v-model="form.date" placeholder="请选择" />
            </el-form-item>
          </div>
          <div class="item">
            <div class="item-title font-14 flex flex-align-items-center">产品信息</div>
            <el-form-item label="产品链接">
              <el-input v-model="form.link" type="text" maxlength="200" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="产品优势" prop="advantage">
              <el-input v-model="form.advantage" type="textarea" maxlength="500" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="相关竞品">
              <el-input v-model="form.name" type="textarea" maxlength="500" placeholder="请输入" />
            </el-form-item>
          </div>
          <div class="item">
            <div class="item-title font-14 flex flex-align-items-center">推广需求线索</div>
            <el-form-item label="预算" prop="budget">
              <el-input v-model="form.budget" type="text" maxlength="32" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="国家" prop="country">
              <el-input v-model="form.country" type="text" maxlength="32" placeholder="美国，建议3个国家左右" />
            </el-form-item>
            <el-form-item label="平台" prop="platform">
              <el-select v-model="form.platform" placeholder="请选择" style="width: 100%">
                <el-option v-for="item in platformList" :key="item.value" :label="item.name"
                  :value="item.name"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="item">
            <div class="item-title font-14 flex flex-align-items-center">内容要求</div>
            <el-form-item label="想展现什么样的内容">
              <el-input v-model="form.name" type="textarea" maxlength="500" placeholder="视频拍摄要求" />
            </el-form-item>
            <el-form-item label="相关参考案例链接">
              <el-input v-model="form.name" type="textarea" maxlength="500" placeholder="请输入" />
            </el-form-item>
          </div>
          <div class="item">
            <div class="item-title font-14 flex flex-align-items-center">红人要求</div>
            <el-form-item label="红人数量" prop="count">
              <el-input v-model="form.count" type="textarea" maxlength="500" placeholder="1-3位，或者：YouTube3位" />
            </el-form-item>
            <el-form-item label="红人粉丝量级" prop="fansNum">
              <el-input v-model="form.fansNum" type="textarea" maxlength="500" placeholder="1000-1万" />
            </el-form-item>
          </div>
          <div class="item">
            <div class="item-title font-14"></div>
            <el-form-item label="意向红人">
              <el-input v-model="form.name" type="textarea" maxlength="500" placeholder="红人主页链接或者红人名" />
            </el-form-item>
            <el-form-item label="其他">
              <el-input v-model="form.name" type="textarea" maxlength="500" placeholder="请输入" />
            </el-form-item>
          </div>
        </div>
      </el-form>

      <div class="btns flex">
        <p class="font-14 pointer" @click="submitForm(ruleFormRef)">提交</p>
        <p class="font-14 pointer" @click="back">取消</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import api from '@/api/index.js';
import { ElMessage, ElLoading } from 'element-plus';

const rules = {
  name: [
    { required: true, message: '请输入需求线索名称', trigger: 'blur' }
  ],
  type: [
    { required: true, message: '请选择推广类型', trigger: 'blur' }
  ],
  advantage: [
    { required: true, message: '请输入产品优势', trigger: 'blur' }
  ],
  budget: [
    { required: true, message: '请输入预算', trigger: 'blur' }
  ],
  country: [
    { required: true, message: '请输入国家', trigger: 'blur' }
  ],
  platform: [
    { required: true, message: '请选择平台', trigger: 'blur' }
  ],
  count: [
    { required: true, message: '请输入红人数量', trigger: 'blur' }
  ],
  fansNum: [
    { required: true, message: '请输入红人粉丝量级', trigger: 'blur' }
  ]
};
const typeList = [
  { name: '品牌宣传曝光', value: 1 },
  { name: '带货', value: 2 },
  { name: '产品测评', value: 3 },
  { name: '素材制作', value: 4 }
];
const platformList = [
  { name: 'YouTube', value: 'YouTube' },
  { name: 'TikTok', value: 'TikTok' },
  { name: 'Instagram', value: 'Instagram' },
  { name: 'Facebook', value: 'Facebook' },
  { name: 'Twitter', value: 'Twitter' },
  { name: 'Twitch', value: 'Twitch' }
];

const form = ref({});
const ruleFormRef = ref();

const back = () => {
  history.go(-1);
}
const submitForm = async formEl => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      // const loadingInstance = ElLoading.service({
      //   fullscreen: false,
      //   text: '提交中...'
      // });
      // api.pro.addProduct(form.value).then(() => {
      //   loadingInstance.close();
      //   emit('change');
      // }).catch(err => {
      //   loadingInstance.close();
      //   ElMessage.error(err.msg);
      // });
    } else {
      console.log('error submit!', fields)
    }
  })
}
</script>

<style lang="less" scoped>
.main {
  padding: 32px;
}

.warp {
  width: 904px;
  padding: 32px;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 1px 10px rgba(0, 0, 0, .08);

  .title {
    color: #333;
    margin-bottom: 24px;
  }

  .form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    .item {
      margin-bottom: 56px;
      margin-right: 48px;

      &:nth-child(2n) {
        margin-right: 0;
      }

      &:last-child {
        &::before {
          display: none;
        }
      }

      &::v-deep {
        .el-form-item {
          margin-bottom: 16px;
        }

        .el-input,
        .el-select,
        .el-textarea {
          flex: 1;
        }

        textarea {
          height: 112px;
        }
      }

      .item-title {
        color: #646566;
        line-height: 20px;
        position: relative;
        margin-bottom: 24px;

        &::before {
          content: "";
          width: 4px;
          height: 14px;
          background: @main-color;
          border-radius: 2px;
          margin-right: 8px;
        }
      }
    }
  }

  .btns {
    justify-content: end;

    p {
      width: 72px;
      height: 32px;
      border-radius: 2px;
      text-align: center;
      margin-left: 16px;

      &:first-child {
        background: @main-color;
        color: #fff;
        line-height: 32px;
      }

      &:last-child {
        background: rgba(255, 82, 119, .04);
        border: 1px solid @main-color;
        color: @main-color;
        line-height: 30px;
      }
    }
  }
}
</style>
